<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="创建备份镜像" @ok="handleOk" :confirm-loading="confirmLoading">
            <div class="instance-modal">
                <div>创建期间不要更操作实例状态。由于数据量较大，创建镜像可能需要一定时间，请耐心等待</div>
                <a-form layout="inline" :model="form">
                    <a-form-item label="镜像名称">
                        <a-input placeholder="请输入镜像名称" v-model:value="form.imageName"></a-input>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { handleInstance } from 'api/modules/api.instance'
import { XsyMessage } from '@/libs/util.toast'

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    instance: {
        type: Object,
        default: {}
    }
});

const form = ref({})

const emit = defineEmits(['update:modelValue','handelOpt']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});
// 确定按钮的回调
const confirmLoading = ref(false)
const handleOk = () => {
    const params = {
        instanceId: props.instance?.Instance?.instanceId,
        method: 'image_create',
        imageName: form.value.imageName
    }
    confirmLoading.value = true
    handleInstance(params).then(res => {
        confirmLoading.value = false
        if (res.code == 0) {
            emit('update:modelValue', false)
            emit('handelOpt', props.instance?.Instance?.instanceId)
        }
    }).catch(() => {
        confirmLoading.value = false
    })
};

</script>

<style scoped lang="less">
.instance-modal {
    font-size: 14px;
    color: #646F87;

    &>div {
        margin-bottom: 8px;
    }
}
</style>

